<template>
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  class="list-dialog"
  :before-close="handleClose">
  <div class='list-box'>
    <h2>参与项目竞争对手分析</h2>
    <h3>基本信息</h3>
    <div class="base-box list2-table">
      <div class="lable">
        <div>竞对名称</div>
        <div>销售人员</div>
        <div>对接层级</div>
        <div>工厂地址</div>
        <div>主推方案</div>
        <div>前期是否有合作</div>
        <div>合作情况</div>
        <div>关键关系人或支持者</div>
      </div>
      <div class="item" v-for="(item,index) in baseInfo" :key="index">
        <div>
          <span v-if="type === 'show'">{{ item.name }}</span>
          <el-input v-else v-model="item.name" />
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.person }}</span>
          <el-input v-else v-model="item.person" />
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.layer }}</span>
          <el-input v-else v-model="item.layer" />
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.addr }}</span>
          <el-input v-else v-model="item.addr" />
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.plan }}</span>
          <el-input v-else v-model="item.plan" />
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.isCooperation }}</span>
          <el-select v-else v-model="item.isCooperation" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.cooperationInfo }}</span>
          <el-input v-else v-model="item.cooperationInfo" />
        </div>
        <div>
          <span v-if="type === 'show'">{{ item.keyRelationships }}</span>
          <el-input v-else v-model="item.keyRelationships" />
        </div>
      </div>
    </div>
    <h3>
      关键采购要素要求
      <p class="btn-box">
        <el-link type="primary" @click="addKey">增加</el-link>
        <el-link type="primary" @click="deleteKey">删除</el-link>
      </p>
    </h3>
    <el-table
      :data='keyInfo'
      height='196px'
      border
      @selection-change='handleSelectionChange'
      style='width: 100%;margin-bottom: 20px;'
    >
      <el-table-column
        type='selection'
        header-align='center'
        align='center'
        width='55'
         v-if="type !== 'show'"
      >
      </el-table-column>
      <el-table-column
        label='维度'
        header-align='center'
        align='center'
        width='150'
      >
        <template slot-scope='scope'>
          <span v-if="type === 'show'">{{ scope.row.dimension }}</span>
          <el-input v-else v-model="scope.row.dimension" />
        </template>
      </el-table-column>
      <el-table-column
        label='采购决策影响权重（%）'
        header-align='center'
        align='center'
        min-width='150'
      >
        <template slot-scope='scope'>
          <span v-if="type === 'show'">{{ scope.row.weight }}</span>
          <el-input-number v-else v-model="scope.row.weight" :min="0" :max="100" label="请输入" />
        </template>
      </el-table-column>
      <el-table-column
        label='万事达和竞对相对客户的表现（1-10分）'
        align='center'
        header-align='center'
      >
        <el-table-column
          label='WSD'
          align='center'
          header-align='center'
          min-width='150'
        >
          <template slot-scope='scope'>
            <span v-if="type === 'show'">{{ scope.row.wsd }}</span>
            <el-input-number v-else v-model="scope.row.wsd" :min="0" :max="100" :step="1" label="请输入" />
          </template>
        </el-table-column>
        <el-table-column
          label='DW'
          align='center'
          header-align='center'
          min-width='150'
        >
          <template slot-scope='scope'>
            <span v-if="type === 'show'">{{ scope.row.dw }}</span>
            <el-input-number v-else v-model="scope.row.dw" :min="0" :max="100" :step="1" label="请输入" />
          </template>
        </el-table-column>
        <el-table-column
          label='BTL'
          align='center'
          header-align='center'
          min-width='150'
        >
          <template slot-scope='scope'>
            <span v-if="type === 'show'">{{ scope.row.btl }}</span>
            <el-input-number v-else v-model="scope.row.btl" :min="0" :max="100" :step="1" label="请输入" />
          </template>
        </el-table-column>
        <el-table-column
          label='DFC'
          align='center'
          header-align='center'
          min-width='150'
        >
          <template slot-scope='scope'>
            <span v-if="type === 'show'">{{ scope.row.dfc }}</span>
            <el-input-number v-else v-model="scope.row.dfc" :min="0" :max="100" :step="1" label="请输入" />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        label='各家具体表现描述'
        header-align='center'
        align='center'
        min-width='150'
      >
        <template slot-scope='scope'>
          <span v-if="type === 'show'">{{ scope.row.dfc }}</span>
          <el-input v-else v-model="scope.row.des" />
        </template>
      </el-table-column>
    </el-table>
    <h3>SWOT分析</h3>
    <div class="swot-box">
      <div class="label">优势</div>
      <div class="label">劣势</div>
      <div class="content">
        <span v-if="type === 'show'">{{ swot.advantage }}</span>
        <el-input v-else v-model="swot.advantage" placeholder="例：品牌，行业案例，参与模式灵活等" />
      </div>
      <div class="content">
        <span v-if="type === 'show'">{{ swot.disadvantages }}</span>
        <el-input v-else v-model="swot.disadvantages" placeholder="例：没有前期合作案例，可能对我司了解深度不足，价格相对较高，略微超出客户造价预期" />
      </div>
      <div class="label">机会</div>
      <div class="label">威胁</div>
      <div class="content">
        <span v-if="type === 'show'">{{ swot.opportunity }}</span>
        <el-input v-else v-model="swot.opportunity" placeholder="例：推荐我司新产品组合从而提高公司项目竞争力" />
      </div>
      <div class="content">
        <span v-if="type === 'show'">{{ swot.threaten }}</span>
        <el-input v-else v-model="swot.threaten" placeholder="例：DFC与项目重要影响人存在较深交情" />
      </div>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      // show/add/edit
      type: '',
      dialogVisible: false,
      baseInfo: [
        {
          id: '1',
          name: 'DW',
          person: 'XXX',
          layer: '项目销售主要对接，副总经理XX多次拜访',
          addr: '1、天津；2、南通；3、沈阳；4、广东；',
          plan: '墙面夹芯板+DW19',
          isCooperation: '否',
          cooperationInfo: '否',
          keyRelationships: 'XXX'
        },
        {
          id: '1',
          name: 'DW',
          person: 'XXX',
          layer: '项目销售主要对接，副总经理XX多次拜访',
          addr: '1、天津；2、南通；3、沈阳；4、广东；',
          plan: '墙面夹芯板+DW19',
          isCooperation: '否',
          cooperationInfo: '否',
          keyRelationships: 'XXX'
        },
        {
          id: '3',
          name: '',
          person: '',
          layer: '',
          addr: '',
          plan: '',
          isCooperation: '',
          cooperationInfo: '',
          keyRelationships: ''
        }
      ],
      keyInfo: [
        {
          id: 1,
          dimension: '产品价格',
          weight: 58,
          wsd: 12,
          dw: 24,
          btl: 36,
          dfc: 48,
          des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
        },
        {
          id: 2,
          dimension: '付款',
          weight: 58,
          wsd: 12,
          dw: 24,
          btl: 36,
          dfc: 48,
          des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
        },
        {
          id: 3,
          dimension: '账期',
          weight: 58,
          wsd: 12,
          dw: 24,
          btl: 36,
          dfc: 48,
          des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
        },
        {
          id: 4,
          dimension: '产品质量',
          weight: 58,
          wsd: 12,
          dw: 24,
          btl: 36,
          dfc: 48,
          des: 'xxxxxxxxxxxxxxxxxxxxxxxx'
        }
      ],
      options: ['是', '否'],
      swot: {
        advantage: '',
        disadvantages: '',
        opportunity: '',
        threaten: ''
      }
    }
  },
  mounted() {},
  methods: {
    handleOpen(type, item) {
      this.type = type
      if (this.type === 'show') {
        this.title = '查看'
        this.baseInfo = item.baseInfo
        this.keyInfo = item.keyInfo
        this.swot = item.swot
      }
      if (this.type === 'add') {
        this.title = '新增'
        this.baseInfo = [
          {
            id: '1',
            name: '',
            person: '',
            layer: '',
            addr: '',
            plan: '',
            isCooperation: '',
            cooperationInfo: '',
            keyRelationships: ''
          },
          {
            id: '2',
            name: '',
            person: '',
            layer: '',
            addr: '',
            plan: '',
            isCooperation: '',
            cooperationInfo: '',
            keyRelationships: ''
          },
          {
            id: '3',
            name: '',
            person: '',
            layer: '',
            addr: '',
            plan: '',
            isCooperation: '',
            cooperationInfo: '',
            keyRelationships: ''
          }
        ]
        this.keyInfo = []
        this.swot = []
      }
      if (this.type === 'edit') {
        this.title = '编辑'
        this.list = item
        this.baseInfo = item.baseInfo
        this.keyInfo = item.keyInfo
        this.swot = item.swot
      }
      this.dialogVisible = true
    },
    handleSelectionChange(val, a) {
      this.multipleSelection = val
    },
    deleteKey() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.multipleSelection.map((obj) => {
          for (let i = this.keyInfo.length; i >= 0; i--) {
            const index = this.keyInfo.findIndex((item) => item.id === obj.id)
            if (index !== -1) this.keyInfo.splice(index, 1)
          }
        })
      }
    },
    addKey() {
      this.keyInfo.push({
        id: new Date().getTime(),
        dimension: '',
        weight: 0,
        wsd: 0,
        dw: 0,
        btl: 0,
        dfc: 0,
        des: ''
      })
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style>
.list-dialog .el-dialog {
  width: 95%;
  height: 95vh;
  margin: 2.5vh auto !important;
}
.list-dialog .el-dialog .el-dialog__body {
  height: calc(100% - 116px);
}
.list-box h2 {
  margin-bottom: 10px;
  color: #000000;
}
.list-box h3 {
  margin-bottom: 10px;
  color: #000000;
}
.list-box .list2-table {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  margin-bottom: 20px;
  overflow: hidden;
}
.list-box .list2-table .lable {
  width: 150px;
  float: left;
}
.list-box .list2-table .lable>div {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.list-box .list2-table .item {
  width: calc((100% - 150px) / 3);
  float: left;
}
.list-box .list2-table .item>div {
  font-size: 12px;
  color: #000000;
  height: 28px;
  line-height: 28px;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  overflow: hidden;
}
.list-box .list2-table .item>div>span {
  padding: 0 5px;
}
.list-box .list2-table .item>div .el-input__inner,.list-box .list2-table .item>div .el-textarea__inner {
  border-radius: 0;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #000000;
  padding:0 5px ;
}
.list-box .list2-table .item>div:nth-of-type(1) .el-input__inner {
  font-weight: bold;
}
.list-box .list2-table .item>div .el-select {
  width: 100%;
}
.list-box .list2-table .item>div .el-select .el-input__icon {
  line-height: 28px;
  color: #000000;
}
.list-box .el-button {
  padding: 8px 20px;
}
.list-box .el-button--warning, .list-box .el-button--warning:focus, .list-box .el-button--warning:hover {
  background: #ff8000;
  border-color: #ff8000;
}
.list-box .el-link--inner {
 padding: 0 10px;
}
.list-box .el-table .el-table__cell {
  padding: 0 0;
}
.list-box .el-table thead {
  color: #000000;
}
.list-box .el-table--border .el-table__cell,
.list-box .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #000000;
}
.list-box .el-table td.el-table__cell,
.list-box  .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #000000;
}

.list-box  .el-table--border,
.list-box  .el-table--group {
  border: 2px solid #000000;
}
.list-box .el-table--border th.el-table__cell {
  border-bottom: 1px solid #000000;
}
.list-box .el-table .el-input__inner {
  border-radius: 0;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #000000;
  padding:0 5px ;
}
.list-box  .el-table {
  color: #000000;
}
.list-box  .el-table .cell {
  padding-left: 0;
  padding-right: 0;
}
.list-box .el-table--border .el-table__cell:first-child .cell {
   padding-left: 0;
   padding-right: 0;
}
.list-box .page-box {
  margin-top: 10PX;
}
.list-box .page-box .el-pagination {
  text-align: right;
}
.list-box .el-input-number {
  width: 100%;
  line-height: 28px;
}
.list-box .swot-box {
  overflow: hidden;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}
.list-box .swot-box .label {
  width: 50%;
  float: left;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.list-box .swot-box .content {
  overflow: hidden;
  width: 50%;
  float: left;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.list-box .swot-box .content .el-input__inner {
  border-radius: 0;
  height: 28px;
  line-height: 29px;
  font-size: 12px;
  color: #000000;
  padding:0 5px ;
}
.list-box .btn-box {
  float: right;
}
</style>
